<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<div id="">
				省份: <select name="" id="provinceId" onchange="changeProvince();">
					<option value="-1">请选择省份</option>
				</select>
				城市: <select name="" id="cityId" onchange="changeCity();">
					<option value="-1">请选择城市</option>
				</select>
				乡镇：<select name="" id="xingzhenid" onchange="changxiangzhen();">
					<option value="-1">请选择所在的乡镇</option>
				</select>
				<br />
				你选择的是： <label id="selectValue"></label>
			</div>
		</body>
		<script type="text/javascript">
			var  provinces =['北京市','福建省'];
			provinces.push('广东省')
			var citys = [
				['朝阳区'],
				['龙岩市'],
				['深圳市'],
				
			];
			var xiangzhengs =[
				['东超镇'],
				['新罗镇'],
				['黄埔镇'],
				
			];
			function changeProvince(){
				var provinceObj = document.getElementById('provinceId');
				var cityObj = document.getElementById('cityId');				
				cityObj.innerHTML = `<option value="-1">请选择城市</option>`;
				if(provinceObj.value==-1){
					return;
				}
				var city = citys[provinceObj.value];			
				for(var i=0;i<city.length;i++){
					cityObj.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
				}
			
			}
				function changxiangzhen(){
					
					var xiangzhenobj = document.getElementById('xingzhenid');
					var xiangzhen = xiangzhens[cityObj.value];
					for(var i=0;i<xiangzhen.length;i++){
						xiangzhenobj.innerHTML+=`<option value="`+i+`">`+xiangzhen[i]+`</option>`;
					}
				}		
			
			onload = function(){
				//添加省份
				var provinceObj = document.getElementById('provinceId');
				for(var i=0;i<provinces.length;i++){
					provinceObj.innerHTML+=`<option value="`+i+`">`+provinces[i]+`</option>`;
					
				}
				
				// onload = function(){
				// 	//添加城市
				// 	var cityobj = document.getElementById('cityId');
				// 	for(var i=0;i<citys.length;i++){
				// 		cityobj.innerHTML+=`<option value="`+i+`">`+citys[i]+`</option>`;
				// 	}
			}
		</script>
	</html>
	
